<!--
 * @Description: 页面的外部框架
 * @Author: 梁晓雨
 * @Date: 2025-01-30 15:33:18
-->
<template>
    <el-container class="right-container-layout">
        <el-header class="main-header-layout">
            <!-- 顶部栏 -->
        </el-header>
        <el-main class="zero-padding common-layout">
            <el-container class="common-layout">
                <el-main class="main-main-layout zero-padding">
                    <el-scrollbar height="95%">
                        <BlogItem @goto="toblogMainDetail" v-for="item in BlogItemData" :key="item.blogid" :data="item" />
                    </el-scrollbar>
                    
                </el-main>
                <!-- <el-aside class="main-right-layout">
                    <div class="newest-message">
                        <div class="newest-message-title">
                            <el-icon><Bell /></el-icon>
                            <el-text>最新通知</el-text>
                        </div>
                        <el-scrollbar height="90%">
                        <MessageItem v-for="item in MessageItemData" :key="item.messageItemId" :data="item" />
                        </el-scrollbar>
                    </div>
                </el-aside> -->
            </el-container>
        </el-main>
    </el-container>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import BlogItem from "../../../components/BlogItem/BlogItem.vue";
import MessageItem from "../../../components/MessageItem/MessageItem.vue";
import { Bell } from "@element-plus/icons-vue";
import router from "@/router";
import store from "@/store";
import request from "@/utils/request";
import StringtoStrArray from "@/utils/StringtoStrArray";
import { onMounted, ref } from "vue";
import StringtoNumArray from "@/utils/StringtoNumArray";


// 获取博文数据
interface Blog{
    blogid: number,
    userid: number,
    blogTitle: string,
    aiSummary: string,
    blogText: string,
    blogPhotoSrc: string,
    directoryId: number,
    directoryName: string,
    directorySrc: string,
    blogUpdated: string,
    tagId: Array<number>,
    tagName: Array<string>,
    relayContent: string,
    originalBlogId: number,
    isDeletedBlog: number,
}
// 博客缩略项的数据
const BlogItemData = ref<Blog[]>()
// 获取博客信息
const getBlog = async() =>{
    const userId = store.getters.getUser.userId;
    await request.get('/blog/queryAll',{
        params:{
            userid:userId
        }
    }).then(res => {
        res.data.map(item => {
            item.tagName = StringtoStrArray(item.tagName)
            item.tagId = StringtoNumArray(item.tagId)
        })
        BlogItemData.value = res.data.slice().reverse()
        console.log(res.data);
    })
}

// 消息测试数据
const MessageItemData = [
    {
        messageItemId:'001',
        senderRight:'管理员',
        senderName:'系统管理员',
        operation:'锁定了您的博客',
        operationObejct:'关于安卓逆向的入门知识',
        blogId:'0012'
    },
    {
        messageItemId:'002',
        senderRight:'好友',
        senderName:'白日梦想家',
        operation:'发布了一篇新博客',
        operationObejct:'关于如何安装VMware',
        blogId:'0015'
    },
    {
        messageItemId:'003',
        senderRight:'好友',
        senderName:'HelloWorld',
        operation:'发布了一篇新博客',
        operationObejct:'如何快速入门React',
        blogId:'0022'
    },
    {
        messageItemId:'004',
        senderRight:'好友',
        senderName:'远视未来',
        operation:'发布了一篇新博客',
        operationObejct:'关于如何清除C盘种的缓存',
        blogId:'0013'
    }
]



// 从博客缩略图跳转到博客详情页
interface BlogIdInfo{
    userid:number,
    blogid:number
}
const toblogMainDetail = (blogIdInfo:BlogIdInfo) => {
    router.push({
        name:'blogMainDetail',
        query:{userid:blogIdInfo.userid, blogid:blogIdInfo.blogid}
    })
    
}

// 页面初始化
onMounted(
    getBlog
)
</script>

<style scoped lang="scss">
@use './BlogMainPage.scss';
</style>
